messages

5 files changed, 49 insertions, 173 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index dfa25b78..6eb2a850 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -111,7 +111,7 @@
 				{/if}
 
 				<div class="w-full flex">
-					<a href={`/${subject.pubkey}/messages`} class="mx-auto">
+					<a href={`/${subject.username}/messages`} class="mx-auto">
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 							<div class="mx-auto flex">
 								<Icon icon="support" style="mr-2 my-auto" />
diff --git a/src/routes/(app)/[username]/(profile)/+page.server.js b/src/routes/(app)/[username]/(profile)/+page.server.js
index d1fa2f41..2777afdc 100644
--- a/src/routes/(app)/[username]/(profile)/+page.server.js
+++ b/src/routes/(app)/[username]/(profile)/+page.server.js
@@ -10,6 +10,7 @@ export async function load({ cookies, params, parent, url }) {
 	if (user) {
 		try {
 			messages = await get(`/${user.pubkey}/${since}/messages`);
+			messages = messages.sort((a, b) => b.created_at - a.created_at);
 		} catch (e) {
 			console.log(`failed to fetch nostr messages`, e);
 		}
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 0421782c..bc19a9df 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -17,8 +17,8 @@
 		if (!browser) return;
 		while (latest.length < 3 && i < messages.length) {
 			let event = messages[i];
-			let { pubkey: k } = event.user;
-			if (k !== user.pubkey && !keys.has(k)) {
+			let k = event.author.id === user.id ? event.recipient.pubkey : event.author.pubkey;
+			if (!keys.has(k)) {
 				keys.add(k);
 				event.content = await decrypt({ event, user });
 				if (event.content) latest.push(event);
@@ -33,36 +33,44 @@
 <div class="space-y-8">
 	{#if user?.id === subject.id}
 		<div>
-			{#if user.balance > 0}
-				<div class="flex justify-center lg:justify-start">
-					<Balance {user} />
-				</div>
-			{:else}
-				<div class="space-y-3">
-					<h1 class="text-2xl">Welcome</h1>
-
-					<p class="text-secondary">
-						Get started by making a deposit or getting someone to pay you in Bitcoin!
+			<div class="flex justify-center lg:justify-start">
+				<Balance {user} />
+			</div>
+			{#if !user.balance}
+				<div class="space-y-8 mt-8">
+					<p class="text-secondary text-lg">
+						Welcome! Your account balance is empty. You can start by making a deposit or by asking
+						someone to pay you.
 					</p>
 
 					<div class="flex gap-4 justify-center w-full">
 						<a href={`/${user.username}/receive`}>
-							<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+							<button
+								class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
+							>
 								<div class="mx-auto flex">
-									<Icon icon="numpad" style="my-auto h-6 mr-2" />
-									<div class="my-auto mt-1">Receive a Payment</div>
+									<Icon icon="numpad" style="my-auto h-6 mr-2 invert" />
+									<div class="my-auto mt-1">Request Payment</div>
 								</div>
 							</button>
 						</a>
 
-						<!-- <a href={`/buy`}> -->
-						<!-- 	<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"> -->
-						<!-- 		<div class="mx-auto flex"> -->
-						<!-- 			<Icon icon="plus" style="my-auto h-6 mr-2" /> -->
-						<!-- 			<div class="my-auto mt-1">Buy Bitcoin</div> -->
-						<!-- 		</div> -->
-						<!-- 	</button> -->
-						<!-- </a> -->
+						{#if user.eligible}
+							<a href={`/buy`}>
+								<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+									<div class="mx-auto flex">
+										<!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
+
+										<img
+											src="/images/bitcoin.svg"
+											class="w-8 border-4 border-transparent mr-2"
+											alt="Bitcoin"
+										/>
+										<div class="my-auto mt-1">Buy Bitcoin</div>
+									</div>
+								</button>
+							</a>
+						{/if}
 					</div>
 				</div>
 			{/if}
@@ -138,17 +146,23 @@
 		</div>
 	{/if}
 
-	{#if latest.length}
-		<div>
-			<h1 class="text-2xl">Messages</h1>
-			{#each latest as { content, user }}
-				<div class="flex">
-					<div class="my-auto">
-						<Avatar {user} size={12} disabled={true} />
+	{#if latest.length && user.id === subject.id}
+		<div class="relative">
+			{#each latest as { content, pubkey, author, recipient }}
+				{@const user = author.id === user.id ? recipient : author}
+				<a href={`/${user.username}/messages`}>
+					<div class="flex hover:bg-gray-100 p-4 rounded-2xl">
+						<div class="my-auto">
+							<Avatar {user} size={'20'} disabled={true} />
+						</div>
+						<div class="my-auto truncate">
+							<div class="my-auto ml-1 text-lg font-bold">{user.username}</div>
+							<div class="my-auto ml-1 text-secondary text-lg truncate">
+								{content}
+							</div>
+						</div>
 					</div>
-					<div class="my-auto ml-1 text-secondary">{user.username}</div>
-					{content}
-				</div>
+				</a>
 			{/each}
 		</div>
 	{/if}
diff --git a/src/routes/(app)/[username]/(profile)/messages/+page.server.js b/src/routes/(app)/[username]/(profile)/messages/+page.server.js
deleted file mode 100644
index 63116099..00000000
--- a/src/routes/(app)/[username]/(profile)/messages/+page.server.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { get } from '$lib/utils';
-
-export async function load({ params, parent, url }) {
-	let { user, subject } = await parent();
-	let { since = 0 } = params;
-
-	let messages = [];
-
-	try {
-		messages = await get(`/nostr/${user.pubkey}/${subject.pubkey}/${since}/messages`);
-	} catch (e) {
-		console.log(`failed to fetch nostr messages`, e);
-	}
-
-	return { newMessages: messages };
-}
diff --git a/src/routes/(app)/[username]/(profile)/messages/+page.svelte b/src/routes/(app)/[username]/(profile)/messages/+page.svelte
deleted file mode 100644
index db7b1ced..00000000
--- a/src/routes/(app)/[username]/(profile)/messages/+page.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-<script>
-	import { browser } from '$app/environment';
-	import { t } from '$lib/translations';
-	import { format, parseISO } from 'date-fns';
-	import { scale } from 'svelte/transition';
-	import { enhance } from '$app/forms';
-	import { Icon } from '$comp';
-	import { back, fail, focus } from '$lib/utils';
-	import { sign, send, encrypt, decrypt } from '$lib/nostr';
-	import { messages, password } from '$lib/store';
-	import { tick, onMount } from 'svelte';
-	import { calculateId } from 'nostr';
-
-	export let data;
-
-	let { newMessages, subject, user } = data;
-	let input, pane;
-
-	$: initialize($password);
-	let initialize = async (p) => {
-		if (!p) return;
-		$messages[user.pubkey] = $messages[user.pubkey] || {};
-		$messages[user.pubkey][subject.pubkey] = $messages[user.pubkey][subject.pubkey] || {};
-
-		for (let m of newMessages) {
-			if (!$messages[user.pubkey][subject.pubkey][m.id]) {
-				m.message = await decrypt({ event: m, user });
-				$messages[user.pubkey][subject.pubkey][m.id] = m;
-				tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-			}
-		}
-		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-	};
-
-	$: events =
-		($messages[user.pubkey] &&
-			$messages[user.pubkey][subject.pubkey] &&
-			Object.values($messages[user.pubkey][subject.pubkey]).sort(
-				(a, b) => a.created_at - b.created
-			)) ||
-		[];
-
-	let sent, submitting, message;
-	let submit = async () => {
-		submitting = true;
-
-		let event = {
-			pubkey: user.pubkey,
-			created_at: Math.floor(Date.now() / 1000),
-			kind: 4,
-			tags: [['p', subject.pubkey]]
-		};
-
-		event.message = message;
-		event.id = await calculateId(event);
-		$messages[user.pubkey][subject.pubkey][event.id] = event;
-		$messages = $messages;
-		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-
-		try {
-			event.content = await encrypt({ message, recipient: subject.pubkey, user });
-			await sign({ event, user });
-			await send(event);
-
-			sent = true;
-		} catch (e) {
-			fail('Failed to send message');
-			delete $messages[user.pubkey][subject.pubkey][event.id];
-			$messages = $messages;
-		}
-
-		message = '';
-		submitting = false;
-	};
-</script>
-
-<div class="container max-w-lg px-4 mx-auto mt-10 space-y-5">
-	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
-		{$t('payments.sendMessage')}
-	</h1>
-
-	<div class="max-h-[calc(50vh)] overflow-y-scroll p-4" bind:this={pane}>
-		{#each events as data}
-			{@const ours = data.pubkey === user.pubkey}
-			{@const theirs = !ours}
-			<div class="rounded-2xl p-4 max-w-[300px] mb-1 text-md" class:ours class:theirs>
-				{#if data.message}
-					{data.message}
-				{:else}
-					-
-				{/if}
-			</div>
-			<div class="text-sm text-gray-400 mb-6" class:text-right={ours}>
-				{format(new Date(data.created_at * 1000), 'MMM d')},
-				{format(new Date(data.created_at * 1000), 'h:mm aa')}
-			</div>
-		{/each}
-	</div>
-
-	<form method="POST" class="space-y-5" on:submit|preventDefault={submit}>
-		<input type="hidden" name="requester_id" value={user.id} />
-		<input type="hidden" name="recipient" value={subject.username} />
-
-		<input
-			use:focus
-			name="message"
-			placeholder={$t('payments.sendMessage')}
-			class="w-full p-4 border rounded-xl"
-			bind:value={message}
-			bind:this={input}
-		/>
-	</form>
-</div>
-
-<style>
-	.ours {
-		@apply bg-gray-100 rounded-br-none ml-auto;
-	}
-
-	.theirs {
-		@apply bg-gray-200 rounded-bl-none;
-	}
-</style>